<template>
    <div class='container_print'>
        <div class='header'>
            <div class='maLogo'>
                <img :src='MAImg' alt='' style='width: 64px'>
                <span style='font-size: 8px'>{{ checkData.cma }}</span>
            </div>
            <div class='title'>
                <span class='checkName'> {{ checkData.name }} </span>
                <span class='checktype'>{{ checkType.reportName }}检测报告</span>
            </div>
            <div class='end'>
                <QrCode v-if='checkData.name' :value='checkData.name' :size='64' />
                <span class='page' />
            </div>
        </div>

        <div class='table-container'>
            <table class='table-layout'>
                <tbody>
                    <tr>
                        <td class='table-cell' colspan='1' rowspan='1'>
                            <div class='field-wrapper'>
                                <span>委托编号</span>
                            </div>
                        </td>
                        <td class='table-cell' colspan='1' rowspan='1'>
                            <div class='field-wrapper'>
                                {{ report.order }}
                            </div>
                        </td>
                        <td class='table-cell' colspan='1' rowspan='1'>
                            <div class='field-wrapper'>
                                检测编号
                            </div>
                        </td>
                        <td class='table-cell' colspan='1' rowspan='1'>
                            <div class='field-wrapper'>
                                {{ report.checkOrder }}
                            </div>
                        </td>
                        <td class='table-cell' colspan='1' rowspan='1'>
                            <div class='field-wrapper'>
                                委托日期
                            </div>
                        </td>
                        <td class='table-cell' colspan='3' rowspan='1'>
                            <div class='field-wrapper'>
                                {{ report.createTime }}
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class='table-cell' colspan='1' rowspan='1'>
                            <div class='field-wrapper'>
                                委托单位
                            </div>
                        </td>
                        <td class='table-cell' colspan='3' rowspan='1'>
                            <div class='field-wrapper'>
                                {{ client.client }}
                            </div>
                        </td>
                        <td class='table-cell' colspan='1' rowspan='1'>
                            <div class='field-wrapper'>
                                检验日期
                            </div>
                        </td>
                        <td class='table-cell' colspan='3' rowspan='1'>
                            <div class='field-wrapper'>
                                {{ report.jyTime }}
                            </div>
                        </td>
                    </tr>
                    <!--            工程名称使用部件-->
                    <tr>
                        <td class='table-cell' colspan='1' rowspan='1'>
                            <div class='field-wrapper'>
                                工程名称
                            </div>
                        </td>
                        <td class='table-cell' colspan='7' rowspan='1'>
                            <div class='field-wrapper'>
                                {{ project.project }}
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class='table-cell' colspan='1' rowspan='1'>
                            <div class='field-wrapper'>
                                使用部位
                            </div>
                        </td>
                        <td class='table-cell' colspan='7' rowspan='1'>
                            <div class='field-wrapper'>
                                {{ report.sendPosition }}
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class='table-cell' colspan='1' rowspan='1'>
                            <div class='field-wrapper'>
                                见证员
                            </div>
                        </td>
                        <td class='table-cell' colspan='7' rowspan='1'>
                            <div class='field-wrapper'>
                                单位：{{ project.jzrdh }}  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 姓名：{{ project.jzr }} <br>
                                证件号：{{ project.jzrzh }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 电话：{{ project.jzrdh }}
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class='A4'>
            <v-form-render
                ref='vFormRef'
                class='vv'
                :form-data='formData.list'
                :form-json='formJson'
                :option-data='optionData'
            />
            <!--            此处添加公章-->
            <img :src='checkData.image' style='width:128px;height:128px;position: absolute;margin-top: -100px;left: 60%;z-index: 2'>
            <span style='width:128px;height:128px;position: absolute;margin-top: -16px;left: 62%;'>{{ time }}</span>
            <!--        拼接下面的部分-->
            <div class='divEnd'>
                <span>检测人: <img :src='jyImage' style='display: inline-block'></span>
                <span>审核人: <img :src='shImage' style='display: inline-block'></span>
                <span>技术负责人: <img :src='jsfzImage' style='display: inline-block'></span>
                <span>批准人: <img :src='jsfzImage' style='display: inline-block'></span>
            </div>
            <div class='divEnd2'>
                <span>施工技术<br>负责人:</span>
                <span>监理工程师<br>(建设单位代表):</span>
            </div>
            <div class='divEnd3'>
                <span style='flex:3'>单位地址: {{ checkData.address }}</span>
                <span style='flex:1'>联系人: {{ checkData.lxr }}</span>
                <span style='flex:1'>联系电话: {{ checkData.phone }}</span>
            </div>
            <div class='divEnd4'>
                <span>注:此报告无检测专用章无效，涂改无效，部分复制无效。对报告若有异议，应在收到报告起十五日内向检测单位提出，或向上一级机构申请种裁.</span>
            </div>
        </div>

    </div>


</template>

<script>
import { getDetails } from '/@/api/Reports'
import { useRoute } from 'vue-router'
import { reactive, ref, nextTick, defineComponent } from 'vue'
import QrCode from '/@/components/QrCode/index.vue'
import MAImg from '/@/assets/img/MA.png'

export default defineComponent({
    name: 'ReportsPrint',
    components: { QrCode },
    setup() {
        const route = useRoute()
        const vFormRef = ref(null)
        const formJson = reactive({ widgetList: [], formConfig: {} })
        const formData = reactive({ list: [] })
        const optionData = reactive({})
        const checkData = ref({ cma: '', name: '',image:'',address:'',lxr:'',phone:'' })
        const report = ref({ order: '', checkOrder: '' })
        const client = ref({ client: '' })
        const project = ref({ project: '',jzrdh:'',jzr:'' })
        const checkType = ref({ reportName: '' })
        const jyImage = ref()
        const shImage = ref()
        const jsfzImage = ref()
        const time = ref(`${new Date().getFullYear()}年${new Date().getMonth() + 1}月${new Date().getDate()}日`)
        const details = getDetails(route.params.id)
            .then(res => {
                console.log(res.data.data)
                checkData.value = res.data.data.check
                report.value = res.data.data.report
                jyImage.value = res.data.data.jyImage
                shImage.value = res.data.data.shImage
                jsfzImage.value = res.data.data.jsfzImage
                // formJson
                formJson.formConfig = JSON.parse(res.data.data?.report?.checkForm).formConfig
                formJson.widgetList = JSON.parse(res.data.data?.report?.checkForm).widgetList
                project.value = res.data.data.project
                client.value = res.data.data.client
                checkType.value = res.data.data.checkType
                // formData.list = JSON.parse(res.data.data?.report?.checkJsonData)
                // console.log(res)

                for (let parseKey in JSON.parse(res.data.data?.report?.checkJsonData)) {
                    formData.list[parseKey] = JSON.parse(res.data.data?.report?.checkJsonData)[parseKey]
                    nextTick(() => {
                        vFormRef.value.setFieldValue(parseKey, JSON.parse(res.data.data?.report?.checkJsonData)[parseKey])
                    })
                }
                nextTick(() => {
                    vFormRef.value.disableForm()
                    // setTimeout(nextTick(() => {
                    // }), 200)
                    nextTick(() => {
                        setTimeout(print(), 200)
                        // window.opener = null
                        // window.open('', '_self')
                        // window.close()
                    })
                })

            })
        return { vFormRef, formJson, formData, optionData, checkData, MAImg, report, client, project,checkType,jyImage,jsfzImage,shImage,time }
    }
})
//
// window.matchMedia('print').addListener(mql => {
//     if (mql.matches) {
//         console.log('准备打印')
//     } else {
//         console.log('打印完成')
//         window.close()
//     }
// })
// formJson.formConfig = JSON.parse(details.data.data?.report?.checkForm)['formConfig']
// formJson.widgetList = JSON.parse(details.data.data?.report?.checkForm)['widgetList']
//  nextTick(() => {
// //     console.log(vFormRef.value)
//      vFormRef.value.setFormJson(JSON.parse(details.data.data?.report?.checkForm))
//  })


</script>

<style>

@page {
    size: A4 portrait;
    @top-left {
        display: none;
    }
    @bottom-center {
        display: none;
    }
}

.container_print > table {
    page-break-inside: avoid;
}

#\31 \.23452384164\.123412416 {
    display: none;
}

body .h-screen {
    height: 100% !important;
}

.m-3 {
    margin: 0 !important;
}

.container_print {
    /*background-color: #000;*/
    /*-webkit-print-color-adjust: exact;*/
}

body {
    font-family: "宋体" !important;
    font-size: 14px;
}

#nprogress {
    display: none;
}

.el-scrollbar__bar {
    display: none;
}
.vertical-align, .el-form-item--default{
    padding: 0!important;
}
.header {
    display: inline-flex;
    page-break-after: always;
    width: 100%;
    justify-content: space-between;
    /*文字居底*/
    align-items: flex-end;
    padding-bottom: 10px;
}

.header .title::before, .header .title::after {
    content: "　";
}

.header .title .checkName {
    display: block;
}

.header .title .checktype {
    font-size: 26px;
    border-bottom: 3px solid #000;
}

.header .end {
    width: auto;
    display: block;
}

/*.header .end .page:after {*/
/*    counter-increment: page;*/
/*    content: counter(page) "页";*/
/*}*/

table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

td.table-cell {
    display: table-cell;
    height: 36px;
    border: 1px solid #333333 !important;
}

.maLogo {
    display: block;
    text-align: center;
    width: 100px;
}

.maLogo img {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.divEnd {
    display: flex;
    border: 1px solid #333333;
    width: 100%;
    padding: 10px;
}

.divEnd span {
    flex: 1;
}

.divEnd2 {
    display: flex;
    border: 1px dashed #000;
    width: 100%;
    padding: 10px;
}

.divEnd2 span {
    flex: 1;
}

.divEnd3,.divEnd4 {
    display: flex;
    width: 100%;
}

.divEnd3 span,.divEnd4 span {
    flex: 1;
    font-size: 8px;
}

.field-wrapper {
    padding-left: 10px;
}

.vv {
    min-height: 100%;
    visble: visible;
    -webkit-print-color-adjust: exact;
}

.vv td {
    vertical-align: middle
}

.vertical-align, .el-form-item--default {
    margin-bottom: 0;
    padding-bottom: 5px;
    padding-top: 5px;
}

.el-input__inner, .el-textarea__inner {
    color: #000 !important;
}

.vv textarea {
    resize: none
}

.el-loading-mask {
    display: none;
}

.vv input, .vv textarea {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.vv .el-input--default {
    background: none !important;
    border: none !important;
}

#app > div > div.layout-sidebar.flex.flex-col.h-screen.transition-width.duration-200.shadow.w-64,
#app > div > div.layout-sidebar-sidesetting.fixed.right-0.top-64.z-10,
#app > div > div.layout-main.flex.flex-1.flex-col.overflow-x-hidden.overflow-y-auto > div.layout-main-tags.h-8.leading-8.text-sm.text-gray-600.relative,
#app > div > div.layout-main.flex.flex-1.flex-col.overflow-x-hidden.overflow-y-auto > div.layout-main-navbar.flex.justify-between.items-center.h-12.shadow-sm.overflow-hidden.relative.z-10 {
    display: none;
}

/*长宽比改为A4纸大小*/
.A4 {
    /*background-color: #fff;*/
    /*padding-bottom: calc(100% * 1.414286 / 1);*/
}

.el-scrollbar {
    background-color: #fff !important;
}

/* 去掉必填选项的星号 */
.el-input__inner {
    padding: 0;
}

.el-form-item__label {
    padding: 0;
}

.el-form-item__label:before {
    display: none;
}
</style>

